<template>
    <view class="tooltip" v-if="show" :style="{
        left: x,
        top: y
    }" @click.stop="()=>{}">
        <view class="">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'Tooltip',
        data() {
            return {
                show: false,
                x: 0,
                y: 0
            };
        },
        methods: {
            open(x, y) {
                this.show = true;
                this.$nextTick(() => {
                    uni.createSelectorQuery().select('.tooltip').boundingClientRect((res) => {
                        this.x = x + 'px';
                        this.y = y - (res.height + 10) + 'px';
                    }).exec();
                })
                
            },
            close() {
                this.show = false;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .tooltip {
        background-color: #fff;
        border-radius: 2rem;
        padding: 3rem;
        position: absolute;
        transform: translate(-50%, 0);
        box-shadow: 0.1rem 0.1rem 1rem #eee;
        z-index: 1;

        ::after {
            content: ' ';
            width: 2rem;
            height: 2rem;
            position: absolute;
            bottom: -1rem;
            left: 50%;
            transform: translate(-50%, 0) rotate(45deg);
            background: #fff;
        }
    }
</style>